import { useEffect } from "react";
import { Avatar, Tooltip, Table, Tag } from "antd";
import { Card as SemiCard, ButtonGroup, Button } from "@douyinfe/semi-ui";
import { IconRefresh, IconEyeOpened } from "@douyinfe/semi-icons";
import { useModel } from "umi";
import { useReactive } from "ahooks";
import dayjs from "dayjs";
import Jdenticon from "react-jdenticon";
import { format } from "timeago.js";

import { FindAllPlatforms } from "../../_graphql/platforms";

const { Column } = Table;

const PlatformProfessionalPlatform = () => {
    const { windowInnerHeight, graphqlFetchPlatform } = useModel("global");

    const state = useReactive({
        loading: false,
        platforms: [],
    });

    const loadPlatforms = async () => {
        state.loading = true;
        let res = await graphqlFetchPlatform({ query: FindAllPlatforms, variables: {} });
        state.platforms = res?.a?.nodes || [];
        state.loading = false;
    };

    useEffect(() => {
        loadPlatforms();
    }, []);

    // 窗口头部：30，应用头：60，操作区内边距：24，卡面头：53，修正值：4
    const cardBodyHeight = windowInnerHeight - 90 - 20 - 54;

    return (
        <div style={{ padding: 10 }}>
            <SemiCard
                title={<span style={{ lineHeight: "32px", fontSize: 16, fontWeight: 600 }}>专业平台信息</span>}
                headerExtraContent={
                    <ButtonGroup>
                        <Button icon={<IconRefresh />} onClick={loadPlatforms}>
                            重新加载
                        </Button>
                    </ButtonGroup>
                }
                headerStyle={{ padding: "10px 14px" }}
                shadows="always"
                bordered={false}
                bodyStyle={{ padding: 0, height: cardBodyHeight }}
            >
                <Table loading={state.loading} dataSource={state.platforms} pagination={false} size="small" rowKey="pfUuid" scroll={{ y: cardBodyHeight - 46 }}>
                    <Column title="序号" align="center" width={60} render={(_, r, i) => i + 1} />
                    <Column title="平台名称" dataIndex="title" align="left" />
                    <Column
                        title="服务名称"
                        dataIndex="type"
                        align="center"
                        render={(_) =>
                            _ && (
                                <Tooltip title={_}>
                                    <IconEyeOpened />
                                </Tooltip>
                            )
                        }
                    />
                    <Column
                        title="节点ID"
                        dataIndex="ipfsPeerId"
                        align="center"
                        render={(_) =>
                            _ && (
                                <Tooltip title={_}>
                                    <IconEyeOpened />
                                </Tooltip>
                            )
                        }
                    />
                    <Column title="节点版本号" dataIndex="ipfsPeerVersion" align="center" />
                    <Column
                        title="运行状态"
                        dataIndex="runningStatus"
                        align="center"
                        width={100}
                        render={(_) => (_ ? <Tag color="#108ee9">在线</Tag> : <Tag color="#f50">离线</Tag>)}
                    />
                    <Column
                        title="是否禁用?"
                        dataIndex="disabled"
                        align="center"
                        width={100}
                        render={(_) => (_ ? <Tag color="#f50">已禁用</Tag> : <Tag color="#108ee9">正常</Tag>)}
                    />
                    <Column title="商品服务?" dataIndex="isCommodityService" align="center" render={(_) => (_ ? "有" : "无")} />
                    <Column title="业务平台?" dataIndex="isBussinessPlatform" align="center" render={(_) => (_ ? "是" : "否")} />
                    <Column title="个人工作平台?" dataIndex="isWork" align="center" render={(_) => (_ ? "是" : "否")} />
                    <Column title="消费平台?" dataIndex="isConsumptionPlatform" align="center" render={(_) => (_ ? "是" : "否")} />
                    <Column
                        title="创建时间"
                        dataIndex="createTime"
                        align="center"
                        render={(_) => _ && <Tooltip title={dayjs(Number(_)).format("YYYY年MM月DD日 HH:ss:mm")}>{format(_, "zh_CN")}</Tooltip>}
                    />
                </Table>
            </SemiCard>
        </div>
    );
};

export default PlatformProfessionalPlatform;
